<template>
    <div class="wrapper">
        <top-header title="专属商城"></top-header>
        <list class="item-container">
            <refresh @refresh="loadingDown()"></refresh>
            <cell class="border-cell"></cell>
            <cell v-for="(demo,key) in goodsList"
                class="cell"
                :key="key">
                <div class="content" :class="[demo.isSelect? 'border': '']" @click="select(demo)">
                    <image class="content_img" :src="demo.pics"></image>
                    <div class="cont_text">
                        <text class="content_first">{{demo.name}}</text>
                        <text class="content_discription">{{demo.description}}</text>
                        <div class="content_third">
                            <text class="content_four_text">￥：</text>
                            <text class="content_four_text">{{demo.goodprice}}</text>
                        </div>
                    </div>
                </div>
            </cell>
            <cell class="cell" v-if="goodsList.length <= 0">
                <div class="no-order">
                    <!-- <image src="bmlocal://assets/zst/wudingdan.png" class="noOrderImg"></image> -->
                    <text>暂无商品</text>
                </div>
            </cell>
            <loading class="loading" @loading="onloading()" :display="showLoading">
                <loading-indicator class="comm-indicator" v-if="!lastPage"></loading-indicator>
                <text class="comm-indicator-text" >{{loadingText}}</text>
            </loading>
        </list>
        <div class="button">
            <wxc-button text="确认"
                @wxcButtonClicked="createdOrder" :btnStyle="btnStyle"></wxc-button>
        </div>
        <div class="order_pop" v-if="payPopShow">
            <text class="order_pop_title">订单信息</text>
            <div class="order_pop_content">
                <text class="order_pop_text1">订单编号：</text>
                <text class="order_pop_text2">{{order.orderId}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">车主：</text>
                <text class="order_pop_text2">{{order.ownername}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">服务类型：</text>
                <text class="order_pop_text2">{{order.p1}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">服务项目：</text>
                <text class="order_pop_text2">{{order.type}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">商家名称：</text>
                <text class="order_pop_text2">{{order.storeName}}</text>
            </div>
            <div class="order_pop_content">
                <text class="order_pop_text1">价格：</text>
                <text class="order_pop_text2">{{order.price}}元</text>
            </div>
            <div class="order_pop_button">
                <text class="order_pop_cencel" @click="cancel">取消</text>
                <text class="order_pop_pay" @click="payOrder(order)">支付</text>
            </div>
        </div>
    </div>
</template>
<script>
import { WxcButton } from 'weex-ui';
var bmWXPay = weex.requireModule('bmWXPay')
// bmWXPay.initWX('wxb41ad58cf1f362f9')
bmWXPay.initWX('wxf4cc61d23f1c0461')
import header from '../../common/header'
export default {
    components: { WxcButton, 'top-header': header, },
    data () {
        return {
            token: '',
            goodsList: [],
            nextClick: true,
            showLoading: 'hide',
            btnStyle: {
                'background-color': '#1E90FF',
            },
            commodityId: [],
            totalPrice: 0,
            form: {
                'uid': '', // 用户id
                'carid': '',  // 汽车id
                'couponid': '',  // 优惠券id
                'ownername': '',  // 车主
                'ownerphone': '',  // 车主电话
                'type': '1',  // 服务项目 1保养  2 维修   汽车美容  1 美容  2 洗车
                'kilometer': '',  // 公里数
                'appointmentdate': '',  // 预约时间
                'appointmenttime': '',  // 预约时间
                'p1': '',  // 1 维修保养订单  2 汽车美容订单 3 车辆检测
                'p8': '',  // 价格
                'storeid': '', // 商家id
                'storeName': '', // 商家名称
                'goodsids': [], // 商品id
            },
            searchParam: {
                "storeid": '',
                "limit": 6,
                "order": "desc",
                "page": 1,
                "sort": "type",
                "brandid": '',
                "seriesid": '',
                "styleid": ''
            },
            payPopShow: false,
            order: {
                orderId: '',
                ownername: '',
                p1: '',
                storeName: '',
                price: 0,
            },
            lastPage:false,//是否是最后一页
            loadingText:'加载中 ...',
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.token = user.token
        this.$router.getParams().then(resData => {
            console.log(resData)
            if (resData.couponid) {
                this.form.couponid = resData.couponid
            }
            this.form.uid = resData.uid
            this.form.carid = resData.carid
            this.form.ownername = resData.ownername
            this.form.ownerphone = resData.ownerphone
            this.form.kilometer = resData.kilometer
            this.form.appointmentdate = resData.appointmentdate
            this.form.appointmenttime = resData.appointmenttime
            this.form.p1 = resData.p1
            this.form.type = resData.type
            this.form.storeid = resData.storeid
            this.form.storeName = resData.storeName
            this.searchParam.storeid = resData.storeid
            this.searchParam.brandid = resData.brandid
            this.searchParam.seriesid = resData.seriesid
            this.searchParam.styleid = resData.styleid
            this.getGoodsList(this.searchParam)
            this.order.ownername = resData.ownername
            this.order.storeName = resData.storeName
            this.order.p1 = "车辆检测"
        })
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },
        callPhone (phone) {
            this.$coms.call(phone)
        },
        // 查询商品列表
        getGoodsList (param) {
            if (!(this.form.p1 == 1 && this.form.type == 1)) {
                return
            }
            this.$notice.loading.show();
            this.$fetch({
                method: 'POST',    // 大写
                name: 'goods.listAll', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: param
            }).then(resData => {
                // 成功回调
                console.log(resData)
                if(resData && resData.errno == 0){
                    let items = resData.data.items
                    for (let i = 0, len = items.length; i < len; i++) {
                        items[i].isSelect = false
                        if (items[i].pics) {
                            items[i].pics = items[i].pics.split(';')[0]
                        }
                        this.goodsList.push(items[i])
                    }
                    if(resData.data && this.goodsList.length >= resData.data.total){
                        this.lastPage = true;
                        this.loadingText = '没有更多'
                    }
                    this.$notice.loading.hide();
                }
            }, error => {
                // 错误回调
                console.log(error)
            })
        },
        loadingDown() {
            this.goodsList = []
            this.searchParam.page = 1;
            this.getGoodsList(this.searchParam)
        },
        onloading() {
            this.searchParam.page = this.searchParam.page + 1;
            this.$notice.loading.show();
            this.showLoading = 'show';
            if(!this.lastPage) {
                this.getGoodsList(this.searchParam)
            } 
            setTimeout(() => {
                this.$notice.loading.hide();
                this.showLoading = 'hide'
            }, 600)
        },
        // 选这商品
        select (item) {
            
            if (this.commodityId.indexOf(item.id) == -1) {
                item.isSelect = true
                this.commodityId.push(item.id)
                this.totalPrice = this.totalPrice + Number(item.goodprice)
            } else {
                item.isSelect = false
                this.commodityId.splice(this.commodityId.indexOf(item.id), 1)
                this.totalPrice -= Number(item.goodprice)
            }
            this.form.goodsids = this.commodityId
            this.form.p8 = this.totalPrice
            this.order.price = this.totalPrice
        },
        // 取消订单
        cancel () {
            this.payPopShow = false;
        },
        // 支付
        payOrder (order) {
            this.payPopShow = false;
            this.getPreOrderInfo({
                orderId: order.orderId,
                amount: order.price
            })
        },
        // 下单
        createdOrder () {
            if (!this.nextClick) {
                this.$notice.toast({ message: '正在提交，请稍后'})
                return
            } 
            this.nextClick = false
            var userInfo = this.$storage.getSync('UserInfo');
            this.token = userInfo.token;
            //  this.$notice.toast({ message: this.token})
            this.$fetch({
                method: 'POST',    // 大写
                name: 'maintenance.create', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: this.form,
                header: {
                    'X-TMACW-APP-Token': this.token
                }
            }).then(resData => {
                const vm = this;
                // 成功回调
                console.log(resData)
                if(resData && resData.errno == 0) {
                    // this.infoObj = resData.data.worker;
                    if (this.order.price > 0) {
                        this.order.orderId = resData.data.id;
                        this.payPopShow = true;
                    } else {
                        this.$notice.toast({ message: "下单成功，等待服务"})
                        this.$router.back({
                            length: 3,
                            type: 'PUSH',
                        })
                    }
                } else {
                    this.$notice.toast({ message: resData.errmsg})
                }
                this.nextClick = true
            }, error => {
                // 错误回调
                console.log(error)
                this.nextClick = true
                this.$notice.toast({ message: "获取订单失败, 请重试"})
            })
        },
        getPreOrderInfo(param) {
            const vm = this;
            var result = bmWXPay.isInstallWXApp();

            if(!result) {
                this.$notice.toast({ message: "请先安装微信客户端！"})
                return;
            }
            
            console.log("+++++++++++++++++++++++++++++++++++++++++++" + result);
            
            var userInfo = this.$storage.getSync('UserInfo');
            this.token = userInfo.token;
            
            this.$fetch({
                method: 'POST',    // 大写
                name: 'pay.payMaintenance', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: param,
                header: {
                    'X-TMACW-APP-Token': this.token
                }
            }).then(resData => {
                
                // 成功回调
                console.log(resData)
                if(resData && resData.errno == 0) {

                    bmWXPay.pay({
                        // 微信支付所需必要参数
                        appid:resData.data.appId,
                        sign:resData.data.sign,
                        timestamp:resData.data.timeStamp,
                        noncestr:resData.data.nonceStr,
                        partnerid:resData.data.partnerId,
                        prepayid:resData.data.prepayId,
                        packageValue:resData.data.packageValue
                    },function(resData){
                        console.log("+++++++++++++++++++++++++++++++++++++++++++1")
                        console.log(resData)
                        //   {"resCode":-2,"status":-2}__LOG
                        if(resData && resData.status == 0){
                            console.log("++++++++++++++++++++++++++支付成功进入查询+++++++++++++++++");
                            vm.$notice.toast({ message: "支付成功"})
                        } else if (resData.status == -1) {
                            vm.$notice.toast({ message: "普通错误类型"})
                        } else if (resData.status == -2) {
                            vm.$notice.toast({ message: "您点击了取消或返回"})
                        } else if (resData.status == -3) {
                            vm.$notice.toast({ message: "发送失败"})
                        } else if (resData.status == -4) {
                            vm.$notice.toast({ message: "授权失败"})
                        } else if (resData.status == -5) {
                            vm.$notice.toast({ message: "微信不支持"})
                        } else {
                            vm.$notice.toast({ message: "失败，请重试"})
                        }
                        vm.$router.back({
                            length: 3,
                            type: 'PUSH',
                        })
                        // 支付结果
                        // resDate.status 说明
                        // 0,   /**< 成功    */
                        // -1,   /**< 普通错误类型    */
                        // -2,   /**< 用户点击取消并返回    */
                        // -3,   /**< 发送失败    */
                        // -4,   /**< 授权失败    */
                        // -5,   /**< 微信不支持    */
                    })
                } else {
                    this.$notice.toast({ message: resData.errmsg})
                }
            }, error => {
                // 错误回调
                console.log(error)
                this.$notice.toast({ message: "获取订单失败, 请重试"})
            })
        },
    }
}
</script>
<style scoped>
@import 'src/js/css/base.scss';
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}

.item-container {
    width: 750px;
    background-color: #f2f3f4;
    justify-content: center;
}
.cell{
    background-color: #f2f3f4;
    width: 750px;
}
.border-cell {
    background-color: #f2f3f4;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: #e0e0e0;
}
.no-order {
    justify-content: center;
    align-items: center;
    height: 1034px;
    width: 750px;
}
.content {
    flex-direction: row;
    border-style: solid;
    border-bottom-width:1px;
    border-color: #e0e0e0;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.content_img{
    width: 200px;
    height: 200px;
    margin-right: 10px;
}
.cont_text{
    width: 500px;
}
.content_first, 
.content_four_text{
    font-size: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.content_discription{
    font-size: 30px;
}
.content_four_text{
    color: #FF0000;
}
.content_third{
    flex-direction: row;
}
.content_four_phone{
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #FF0000;
    margin-left: 300px;
}
.border {
    border-style: solid;
    border-width: 2px;
    border-color: #FF0000;
}
.button{
    position: fixed;
    align-items: center;
    bottom: 0px;
    width: 750px;
}
.order_pop{
    position: fixed;
    background-color: #fff;
    height: 800px;
    width: 550px;
    top: 200px;
    left: 100px;
    /* align-items: center; */
}
.order_pop_title{
    height: 100px;
    line-height: 100px;
    font-size: 40px;
    text-align: center;
}
.order_pop_content{
    flex-direction: row;
    height: 80px;
    align-items: center;
}
.order_pop_text1{
    color: #666;
    font-size: 36px;
    width: 300px;
    text-align: right;
}
.order_pop_text2{
    color: #666;
    font-size: 36px;
}
.order_pop_button{
    flex-direction: row;
    height: 130px;
    justify-content: space-around;
    align-items: flex-end;
}
.order_pop_cencel{
    font-size: 40px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 8px;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.order_pop_pay{
    font-size: 40px;
    background-color: #1E90FF;
    color: #fff;
    border-radius: 8px;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
</style>
